import React, { Component } from 'react';
import { SearchDiv } from './style'
import { withRouter } from 'react-router-dom'
// 图片
import search from '../../assets/images/search.png';

@withRouter
class index extends Component {
  
  toSearch = () => {
    this.props.history.push('/search')
  }

  render() {
    // console.log(this.props)
    return (
      <SearchDiv>
        <div className="leftwrap" onClick={this.toSearch}>
          <div className="realsearch">
            <span><img src={search} alt="搜索" /></span>
            <input
              type="text"
              placeholder={this.props.context}
              onChange={(e) => {
                // store.dispatch({
                //   type: "changeKeyword",
                //   keyword: e.target.value
                // })
              }}
            />
          </div>
        </div>
        {
          this.props.isShowProfile &&
          <div className="rightwrap">
            <img src={this.props.person} alt="右侧图标" onClick={ () => this.props.history.push('/more')} />
          </div>
        }

      </SearchDiv>
    );
  }
}

export default index;

/*
placeholder部分：
父组件使用 例
  state = {
    // 搜索框placeholder
    context: '搜索商品,品牌',
    // 搜索框右侧有无东西，无则flase
    isShowProfile: true,
    // 搜索框右侧图片
    person
  }
<SearchNav {...this.state} />
 */